<html>

<head>
    <script src=https://cdn.tailwindcss.com></script>
    <link rel=stylesheet href=https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css>
    <link rel="shortcut icon" href="./logo.ico" type="image/x-icon">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>数据库迁移评估</title>

    <style>
        * {
            font-family:
                Inter,
                sans-serif;
        }

        ::-webkit-scrollbar {
            display: none;
        }

        .highlighted-section {
            outline: 2px solid #3F20FB;
            background-color: rgba(63, 32, 251, 0.1);
        }

        .edit-button {
            position: absolute;
            z-index: 1000;
        }

        :root {
            /* Base colors */
            --color-base: #ffffff;
            --color-base-50: #f9fafb;
            --color-base-100: #f3f4f6;
            --color-base-200: #e5e7eb;
            --color-base-300: #d1d5db;
            --color-base-400: #9ca3af;
            --color-base-500: #6b7280;
            --color-base-600: #4b5563;
            --color-base-700: #374151;
            --color-base-800: #1f2937;
            --color-base-900: #111827;
            --color-base-content: #1f2937;

            /* Primary colors */
            --color-primary: #3b82f6;
            --color-primary-50: #eff6ff;
            --color-primary-100: #dbeafe;
            --color-primary-200: #bfdbfe;
            --color-primary-300: #93c5fd;
            --color-primary-400: #60a5fa;
            --color-primary-500: #3b82f6;
            --color-primary-600: #2563eb;
            --color-primary-700: #1d4ed8;
            --color-primary-800: #1e40af;
            --color-primary-900: #1e3a8a;
            --color-primary-focus: #2563eb;
            --color-primary-content: #ffffff;

            /* Secondary colors */
            --color-secondary: #8b5cf6;
            --color-secondary-50: #f5f3ff;
            --color-secondary-100: #ede9fe;
            --color-secondary-200: #ddd6fe;
            --color-secondary-300: #c4b5fd;
            --color-secondary-400: #a78bfa;
            --color-secondary-500: #8b5cf6;
            --color-secondary-600: #7c3aed;
            --color-secondary-700: #6d28d9;
            --color-secondary-800: #5b21b6;
            --color-secondary-900: #4c1d95;
            --color-secondary-focus: #7c3aed;
            --color-secondary-content: #ffffff;

            /* Accent colors */
            --color-accent: #f472b6;
            --color-accent-50: #fdf2f8;
            --color-accent-100: #fce7f3;
            --color-accent-200: #fbcfe8;
            --color-accent-300: #f9a8d4;
            --color-accent-400: #f472b6;
            --color-accent-500: #ec4899;
            --color-accent-600: #db2777;
            --color-accent-700: #be185d;
            --color-accent-800: #9d174d;
            --color-accent-900: #831843;
            --color-accent-focus: #db2777;
            --color-accent-content: #ffffff;

            /* Neutral colors */
            --color-neutral: #6b7280;
            --color-neutral-50: #f9fafb;
            --color-neutral-100: #f3f4f6;
            --color-neutral-200: #e5e7eb;
            --color-neutral-300: #d1d5db;
            --color-neutral-400: #9ca3af;
            --color-neutral-500: #6b7280;
            --color-neutral-600: #4b5563;
            --color-neutral-700: #374151;
            --color-neutral-800: #1f2937;
            --color-neutral-900: #111827;
            --color-neutral-focus: #4b5563;
            --color-neutral-content: #ffffff;

            /* Info colors */
            --color-info: #3b82f6;
            --color-info-50: #eff6ff;
            --color-info-100: #dbeafe;
            --color-info-200: #bfdbfe;
            --color-info-300: #93c5fd;
            --color-info-400: #60a5fa;
            --color-info-500: #3b82f6;
            --color-info-600: #2563eb;
            --color-info-700: #1d4ed8;
            --color-info-800: #1e40af;
            --color-info-900: #1e3a8a;
            --color-info-focus: #2563eb;
            --color-info-content: #ffffff;

            /* Success colors */
            --color-success: #10b981;
            --color-success-50: #ecfdf5;
            --color-success-100: #d1fae5;
            --color-success-200: #a7f3d0;
            --color-success-300: #6ee7b7;
            --color-success-400: #34d399;
            --color-success-500: #10b981;
            --color-success-600: #059669;
            --color-success-700: #047857;
            --color-success-800: #065f46;
            --color-success-900: #064e3b;
            --color-success-focus: #059669;
            --color-success-content: #ffffff;

            /* Warning colors */
            --color-warning: #f59e0b;
            --color-warning-50: #fffbeb;
            --color-warning-100: #fef3c7;
            --color-warning-200: #fde68a;
            --color-warning-300: #fcd34d;
            --color-warning-400: #fbbf24;
            --color-warning-500: #f59e0b;
            --color-warning-600: #d97706;
            --color-warning-700: #b45309;
            --color-warning-800: #92400e;
            --color-warning-900: #78350f;
            --color-warning-focus: #d97706;
            --color-warning-content: #ffffff;

            /* Error colors */
            --color-error: #ef4444;
            --color-error-50: #fef2f2;
            --color-error-100: #fee2e2;
            --color-error-200: #fecaca;
            --color-error-300: #fca5a5;
            --color-error-400: #f87171;
            --color-error-500: #ef4444;
            --color-error-600: #dc2626;
            --color-error-700: #b91c1c;
            --color-error-800: #991b1b;
            --color-error-900: #7f1d1d;
            --color-error-focus: #dc2626;
            --color-error-content: #ffffff;
        }

        /* Dark theme */
        .dark {
            /* Base colors */
            --color-base: #1f2937;
            --color-base-50: #111827;
            --color-base-100: #1f2937;
            --color-base-200: #374151;
            --color-base-300: #4b5563;
            --color-base-400: #6b7280;
            --color-base-500: #9ca3af;
            --color-base-600: #d1d5db;
            --color-base-700: #e5e7eb;
            --color-base-800: #f3f4f6;
            --color-base-900: #f9fafb;
            --color-base-content: #f9fafb;

            /* Primary colors */
            --color-primary: #60a5fa;
            --color-primary-50: #1e3a8a;
            --color-primary-100: #1e40af;
            --color-primary-200: #1d4ed8;
            --color-primary-300: #2563eb;
            --color-primary-400: #3b82f6;
            --color-primary-500: #60a5fa;
            --color-primary-600: #93c5fd;
            --color-primary-700: #bfdbfe;
            --color-primary-800: #dbeafe;
            --color-primary-900: #eff6ff;
            --color-primary-focus: #3b82f6;
            --color-primary-content: #1f2937;

            /* Secondary colors */
            --color-secondary: #a78bfa;
            --color-secondary-50: #4c1d95;
            --color-secondary-100: #5b21b6;
            --color-secondary-200: #6d28d9;
            --color-secondary-300: #7c3aed;
            --color-secondary-400: #8b5cf6;
            --color-secondary-500: #a78bfa;
            --color-secondary-600: #c4b5fd;
            --color-secondary-700: #ddd6fe;
            --color-secondary-800: #ede9fe;
            --color-secondary-900: #f5f3ff;
            --color-secondary-focus: #8b5cf6;
            --color-secondary-content: #1f2937;

            /* Accent colors */
            --color-accent: #f472b6;
            --color-accent-50: #831843;
            --color-accent-100: #9d174d;
            --color-accent-200: #be185d;
            --color-accent-300: #db2777;
            --color-accent-400: #ec4899;
            --color-accent-500: #f472b6;
            --color-accent-600: #f9a8d4;
            --color-accent-700: #fbcfe8;
            --color-accent-800: #fce7f3;
            --color-accent-900: #fdf2f8;
            --color-accent-focus: #ec4899;
            --color-accent-content: #1f2937;

            /* Neutral colors remain the same as light theme */

            /* Info colors */
            --color-info: #60a5fa;
            --color-info-50: #1e3a8a;
            --color-info-100: #1e40af;
            --color-info-200: #1d4ed8;
            --color-info-300: #2563eb;
            --color-info-400: #3b82f6;
            --color-info-500: #60a5fa;
            --color-info-600: #93c5fd;
            --color-info-700: #bfdbfe;
            --color-info-800: #dbeafe;
            --color-info-900: #eff6ff;
            --color-info-focus: #3b82f6;
            --color-info-content: #1f2937;

            /* Success colors */
            --color-success: #34d399;
            --color-success-50: #064e3b;
            --color-success-100: #065f46;
            --color-success-200: #047857;
            --color-success-300: #059669;
            --color-success-400: #10b981;
            --color-success-500: #34d399;
            --color-success-600: #6ee7b7;
            --color-success-700: #a7f3d0;
            --color-success-800: #d1fae5;
            --color-success-900: #ecfdf5;
            --color-success-focus: #10b981;
            --color-success-content: #1f2937;

            /* Warning colors */
            --color-warning: #fbbf24;
            --color-warning-50: #78350f;
            --color-warning-100: #92400e;
            --color-warning-200: #b45309;
            --color-warning-300: #d97706;
            --color-warning-400: #f59e0b;
            --color-warning-500: #fbbf24;
            --color-warning-600: #fcd34d;
            --color-warning-700: #fde68a;
            --color-warning-800: #fef3c7;
            --color-warning-900: #fffbeb;
            --color-warning-focus: #f59e0b;
            --color-warning-content: #1f2937;

            /* Error colors */
            --color-error: #f87171;
            --color-error-50: #7f1d1d;
            --color-error-100: #991b1b;
            --color-error-200: #b91c1c;
            --color-error-300: #dc2626;
            --color-error-400: #ef4444;
            --color-error-500: #f87171;
            --color-error-600: #fca5a5;
            --color-error-700: #fecaca;
            --color-error-800: #fee2e2;
            --color-error-900: #fef2f2;
            --color-error-focus: #ef4444;
            --color-error-content: #1f2937;
        }
    </style>
    <style>
        .haders {
            height: 70px;
            color: #fff;
            padding: 17px;
            background-color: rgb(31, 44, 55);
        }

        .form-item {
            display: flex;
            align-items: center;
        }

        .item-label {
            width: 145px;
        }


        .testConnect {
            background-color: rgb(64, 158, 255);
            color: #fff;
            box-shadow: 0 0 5px #aaa;
            margin-left: 10px;
        }

        .testConnect:hover {
            opacity: .8 !important;
            /* background-color:rgb(64, 158, 255)  !important; */
        }

        main {
            height: 100%;
        }

        #footer {
            background: #000;
            position: fixed;
            width: 100%;
            bottom: 0;
            color: #fff;
            font-size: 18px;
        }

        strong::before {
            content: '*';
            color: red;
            margin-right: 5px;
        }
    </style>

    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        // Default Tailwind colors
                        transparent: 'transparent',
                        current: 'currentColor',
                        black: '#000000',
                        white: '#ffffff',
                        gray: {
                            50: '#f9fafb',
                            100: '#f3f4f6',
                            200: '#e5e7eb',
                            300: '#d1d5db',
                            400: '#9ca3af',
                            500: '#6b7280',
                            600: '#4b5563',
                            700: '#374151',
                            800: '#1f2937',
                            900: '#111827',
                        },
                        red: {
                            50: '#fef2f2',
                            100: '#fee2e2',
                            200: '#fecaca',
                            300: '#fca5a5',
                            400: '#f87171',
                            500: '#ef4444',
                            600: '#dc2626',
                            700: '#b91c1c',
                            800: '#991b1b',
                            900: '#7f1d1d',
                        },
                        yellow: {
                            50: '#fffbeb',
                            100: '#fef3c7',
                            200: '#fde68a',
                            300: '#fcd34d',
                            400: '#fbbf24',
                            500: '#f59e0b',
                            600: '#d97706',
                            700: '#b45309',
                            800: '#92400e',
                            900: '#78350f',
                        },
                        green: {
                            50: '#ecfdf5',
                            100: '#d1fae5',
                            200: '#a7f3d0',
                            300: '#6ee7b7',
                            400: '#34d399',
                            500: '#10b981',
                            600: '#059669',
                            700: '#047857',
                            800: '#065f46',
                            900: '#064e3b',
                        },
                        blue: {
                            50: '#eff6ff',
                            100: '#dbeafe',
                            200: '#bfdbfe',
                            300: '#93c5fd',
                            400: '#60a5fa',
                            500: '#3b82f6',
                            600: '#2563eb',
                            700: '#1d4ed8',
                            800: '#1e40af',
                            900: '#1e3a8a',
                        },
                        indigo: {
                            50: '#eef2ff',
                            100: '#e0e7ff',
                            200: '#c7d2fe',
                            300: '#a5b4fc',
                            400: '#818cf8',
                            500: '#6366f1',
                            600: '#4f46e5',
                            700: '#4338ca',
                            800: '#3730a3',
                            900: '#312e81',
                        },
                        purple: {
                            50: '#f5f3ff',
                            100: '#ede9fe',
                            200: '#ddd6fe',
                            300: '#c4b5fd',
                            400: '#a78bfa',
                            500: '#8b5cf6',
                            600: '#7c3aed',
                            700: '#6d28d9',
                            800: '#5b21b6',
                            900: '#4c1d95',
                        },
                        pink: {
                            50: '#fdf2f8',
                            100: '#fce7f3',
                            200: '#fbcfe8',
                            300: '#f9a8d4',
                            400: '#f472b6',
                            500: '#ec4899',
                            600: '#db2777',
                            700: '#be185d',
                            800: '#9d174d',
                            900: '#831843',
                        },

                        // Custom color schemes
                        base: {
                            DEFAULT: 'var(--color-base)',
                            50: 'var(--color-base-50)',
                            100: 'var(--color-base-100)',
                            200: 'var(--color-base-200)',
                            300: 'var(--color-base-300)',
                            400: 'var(--color-base-400)',
                            500: 'var(--color-base-500)',
                            600: 'var(--color-base-600)',
                            700: 'var(--color-base-700)',
                            800: 'var(--color-base-800)',
                            900: 'var(--color-base-900)',
                            content: 'var(--color-base-content)',
                        },
                        primary: {
                            DEFAULT: 'var(--color-primary)',
                            50: 'var(--color-primary-50)',
                            100: 'var(--color-primary-100)',
                            200: 'var(--color-primary-200)',
                            300: 'var(--color-primary-300)',
                            400: 'var(--color-primary-400)',
                            500: 'var(--color-primary-500)',
                            600: 'var(--color-primary-600)',
                            700: 'var(--color-primary-700)',
                            800: 'var(--color-primary-800)',
                            900: 'var(--color-primary-900)',
                            focus: 'var(--color-primary-focus)',
                            content: 'var(--color-primary-content)',
                        },
                        secondary: {
                            DEFAULT: 'var(--color-secondary)',
                            50: 'var(--color-secondary-50)',
                            100: 'var(--color-secondary-100)',
                            200: 'var(--color-secondary-200)',
                            300: 'var(--color-secondary-300)',
                            400: 'var(--color-secondary-400)',
                            500: 'var(--color-secondary-500)',
                            600: 'var(--color-secondary-600)',
                            700: 'var(--color-secondary-700)',
                            800: 'var(--color-secondary-800)',
                            900: 'var(--color-secondary-900)',
                            focus: 'var(--color-secondary-focus)',
                            content: 'var(--color-secondary-content)',
                        },
                        accent: {
                            DEFAULT: 'var(--color-accent)',
                            50: 'var(--color-accent-50)',
                            100: 'var(--color-accent-100)',
                            200: 'var(--color-accent-200)',
                            300: 'var(--color-accent-300)',
                            400: 'var(--color-accent-400)',
                            500: 'var(--color-accent-500)',
                            600: 'var(--color-accent-600)',
                            700: 'var(--color-accent-700)',
                            800: 'var(--color-accent-800)',
                            900: 'var(--color-accent-900)',
                            focus: 'var(--color-accent-focus)',
                            content: 'var(--color-accent-content)',
                        },
                        neutral: {
                            DEFAULT: 'var(--color-neutral)',
                            50: 'var(--color-neutral-50)',
                            100: 'var(--color-neutral-100)',
                            200: 'var(--color-neutral-200)',
                            300: 'var(--color-neutral-300)',
                            400: 'var(--color-neutral-400)',
                            500: 'var(--color-neutral-500)',
                            600: 'var(--color-neutral-600)',
                            700: 'var(--color-neutral-700)',
                            800: 'var(--color-neutral-800)',
                            900: 'var(--color-neutral-900)',
                            focus: 'var(--color-neutral-focus)',
                            content: 'var(--color-neutral-content)',
                        },
                        info: {
                            DEFAULT: 'var(--color-info)',
                            50: 'var(--color-info-50)',
                            100: 'var(--color-info-100)',
                            200: 'var(--color-info-200)',
                            300: 'var(--color-info-300)',
                            400: 'var(--color-info-400)',
                            500: 'var(--color-info-500)',
                            600: 'var(--color-info-600)',
                            700: 'var(--color-info-700)',
                            800: 'var(--color-info-800)',
                            900: 'var(--color-info-900)',
                            focus: 'var(--color-info-focus)',
                            content: 'var(--color-info-content)',
                        },
                        success: {
                            DEFAULT: 'var(--color-success)',
                            50: 'var(--color-success-50)',
                            100: 'var(--color-success-100)',
                            200: 'var(--color-success-200)',
                            300: 'var(--color-success-300)',
                            400: 'var(--color-success-400)',
                            500: 'var(--color-success-500)',
                            600: 'var(--color-success-600)',
                            700: 'var(--color-success-700)',
                            800: 'var(--color-success-800)',
                            900: 'var(--color-success-900)',
                            focus: 'var(--color-success-focus)',
                            content: 'var(--color-success-content)',
                        },
                        warning: {
                            DEFAULT: 'var(--color-warning)',
                            50: 'var(--color-warning-50)',
                            100: 'var(--color-warning-100)',
                            200: 'var(--color-warning-200)',
                            300: 'var(--color-warning-300)',
                            400: 'var(--color-warning-400)',
                            500: 'var(--color-warning-500)',
                            600: 'var(--color-warning-600)',
                            700: 'var(--color-warning-700)',
                            800: 'var(--color-warning-800)',
                            900: 'var(--color-warning-900)',
                            focus: 'var(--color-warning-focus)',
                            content: 'var(--color-warning-content)',
                        },
                        error: {
                            DEFAULT: 'var(--color-error)',
                            50: 'var(--color-error-50)',
                            100: 'var(--color-error-100)',
                            200: 'var(--color-error-200)',
                            300: 'var(--color-error-300)',
                            400: 'var(--color-error-400)',
                            500: 'var(--color-error-500)',
                            600: 'var(--color-error-600)',
                            700: 'var(--color-error-700)',
                            800: 'var(--color-error-800)',
                            900: 'var(--color-error-900)',
                            focus: 'var(--color-error-focus)',
                            content: 'var(--color-error-content)',
                        },
                        // Aliases
                        danger: {
                            DEFAULT: 'var(--color-error)',
                            50: 'var(--color-error-50)',
                            100: 'var(--color-error-100)',
                            200: 'var(--color-error-200)',
                            300: 'var(--color-error-300)',
                            400: 'var(--color-error-400)',
                            500: 'var(--color-error-500)',
                            600: 'var(--color-error-600)',
                            700: 'var(--color-error-700)',
                            800: 'var(--color-error-800)',
                            900: 'var(--color-error-900)',
                            focus: 'var(--color-error-focus)',
                            content: 'var(--color-error-content)',
                        },
                        failure: {
                            DEFAULT: 'var(--color-error)',
                            50: 'var(--color-error-50)',
                            100: 'var(--color-error-100)',
                            200: 'var(--color-error-200)',
                            300: 'var(--color-error-300)',
                            400: 'var(--color-error-400)',
                            500: 'var(--color-error-500)',
                            600: 'var(--color-error-600)',
                            700: 'var(--color-error-700)',
                            800: 'var(--color-error-800)',
                            900: 'var(--color-error-900)',
                            focus: 'var(--color-error-focus)',
                            content: 'var(--color-error-content)',
                        },
                    },
                },
            },
            variants: {
                extend: {
                    backgroundColor: ['active', 'group-hover'],
                    textColor: ['active', 'group-hover'],
                },
            },
            plugins: [],
        };
    </script>
</head>

<body class='h-full bg-base-50 text-base-content'>
    <div class='min-h-screen bg-neutral-100'>
        <main id='main class=max-w-4xl mx-auto bg-white shadow-lg rounded-lg overflow-hidden'>
            <header class="haders" id='header class=bg-neutral-800 text-white p-7'>
                <h1 class='text-2xl font-bold'>数据库迁移评估</h1>
            </header>

            <div id='content' class='p-8 space-y-8'>
                <section id='input-section' class='space-y-6'>
                    <h2 class='text-xl font-semibold'>输入数据库信息</h2>
                    <div class='grid gap-2'>
                        <div class='space-y-4' style="width: 50%;">
                            <!-- <h3>源数据库</h3> -->
                            <p class="form-item">
                                <strong class="item-label">数据库类型：</strong>
                            <p class="form-item">
                                <select name="start" id="target" onchange="handleChange()"
                                    class='w-full p-2 border rounded'>
                                    <option value="MYSQL">MYSQL</option>
                                    <option value="ORACLE">ORACLE</option>
                                    <!-- <option value="SQLSERVER">SQLSERVER</option>
                                    <option value="DB2">DB2</option>
                                    <option value="PG">PG</option> -->

                                </select>
                                <span style="margin:0 15px;"><svg t="1730167291369" class="icon" viewBox="0 0 1024 1024"
                                        version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4257" width="25"
                                        height="25">
                                        <path
                                            d="M918.6 489.3L646.1 216.8c-12.3-12.3-32.5-12.3-44.8 0l-0.7 0.7c-12.3 12.3-12.3 32.4 0 44.7l218.7 218.7H257.6c-17.3 0-31.5 14.2-31.5 31.5s14.2 31.5 31.5 31.5h560.1L601.2 760.5c-12.5 12.5-12.5 32.9 0 45.4s32.9 12.5 45.4 0l271.1-271.1s0.1-0.1 0.2-0.1l0.7-0.7c12.3-12.3 12.3-32.4 0-44.7z"
                                            fill="#515151" p-id="4258"></path>
                                        <path d="M97.6 512.6a31.8 31.7 0 1 0 63.6 0 31.8 31.7 0 1 0-63.6 0Z"
                                            fill="#515151" p-id="4259"></path>
                                    </svg></span>
                                <select name="end" id="target" class='w-full p-2 border rounded'>
                                    <option value="DAMENG">DAMENG</option>
                                    <option value="KINGBASE">KINGBASE</option>
                                    <option value="OCEANBASE">OCEANBASE</option>
                                    <option value="GAUSSDB">GAUSSDB</option>
                                    <option value="OPENGAUSS">OPENGAUSS</option>
                                    <option value="TDSQL">TDSQL</option>
                                    <option value="TIDB">TIDB</option>
                                    <option value="GBASE">GBASE</option>
                                </select>
                            </p>
                            </p>
                            <p class="form-item">
                                <strong class="item-label">源库IP：</strong>
                                <input name="ip" type='text' placeholder='源数据库IP' 地址 class='w-full p-2 border rounded'>
                            </p>
                            <p class="form-item">
                                <strong class="item-label">源库端口：</strong>
                                <input name="port" type='text' placeholder='源数据库端口' class='w-full p-2 border rounded'>
                            </p>
                            <p class="form-item">
                                <strong class="item-label">数据库：</strong>
                                <input name="database" type='text' placeholder='源数据库' 地址
                                    class='w-full p-2 border rounded'>
                            </p>
                            <p class="form-item" style="display: none;">
                                <strong class="item-label">schema：</strong>
                                <input name="schema" type='text' placeholder='源schema' 地址
                                    class='w-full p-2 border rounded'>
                            </p>
                            <p class="form-item">
                                <strong class="item-label">源库用户名：</strong>
                                <input name="username" type='text' placeholder='源数据库用户名'
                                    class='w-full p-2 border rounded'>
                            </p>
                            <p class="form-item">
                                <strong class="item-label">源库密码：</strong>
                                <input type='password' name="password" placeholder='源数据库密码'
                                    class='w-full p-2 border rounded'>
                            </p>
                            <div style="margin-top: 15px;">
                                <button onclick="testConnect()"
                                    class='testConnect text-white py-2 px-4 rounded transition'>
                                    测试连接
                                </button>
                                <button onclick="handleSubmit()"
                                    class='bg-neutral-800 text-white py-2 px-4 rounded hover:bg-neutral-700 transition'>
                                    开始评估
                                </button>

                            </div>
                        </div>
                        <!-- <div class=space-y-4>
                            <h3 class=font-medium>目标数据库</h3>
                           
                        </div> -->
                    </div>
                </section>
            </div>
            <footer id="footer" class="bg-neutral-100 p-4 text-center text-sm text-neutral-600">
                <p>元目-数据库迁移评估工具. 保留所有权利。</p>
            </footer>
        </main>

    </div>
    <script>
        let targetValue = {};

        const validate = () => {
            const InputEl = document.querySelectorAll('input');
            const selectEl = document.querySelector('select');
            const startValue = document.querySelector('select[name=start]').value;
            const endValue = document.querySelector('select[name=end]').value;
            targetValue = {}
            let hasEmpty = false;

            InputEl.forEach((item) => {
                if (startValue == 'MYSQL' && item.name == 'schema') {
                    return
                }
                // console.log(item.name);
                if (item.value.trim() === '') {
                    hasEmpty = true;
                    return;
                }
                else {
                    targetValue[item.name] = item.value;
                }
            })
            // targetValue['start'] = startValue;
            // targetValue['end'] = endValue;
            targetValue['taskType'] = `${startValue}-${endValue}`
            return hasEmpty;
        }


        const handleSubmit = () => {
            if (validate()) {
                return alert(`输入框不能为空`);
            }
            localStorage.setItem('targetValue', JSON.stringify(targetValue));
            window.location.href = `./result.html`;
        }

        const testConnect = () => {
            if (validate()) {
                return alert(`输入框不能为空`);
            }
            const testConnect = document.querySelector('.testConnect');
            const { taskType, username, password, ip, port, schema, database } = targetValue;

            const obj = {
                catalog: taskType.split('-')[0],
                database,
                schema,
                connection: {
                    user: username,
                    password,
                    host: ip,
                    port

                }
            }
            fetch('/database/connectCheck', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify(obj)
            }).then(response => response.json()).then(res => {
                // console.log(res);
                if (res.code == 200) {
                    testConnect.style.background = 'green';
                    testConnect.innerText = '连接成功';
                } else {
                    testConnect.style.background = 'red';
                    testConnect.innerText = '连接失败';
                }
            })
        }

        const handleChange = (e) => {
            const startValue = document.querySelector('select[name=start]').value;;
            const schemaEl = document.querySelector('input[name=schema]').parentNode;
            if (startValue == 'ORACLE') {
                schemaEl.style.display = 'flex';
            } else {
                schemaEl.style.display = 'none';
            }
        }
    </script>
</body>

</html>